<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
    <title>Closure</title>
    <style>
        li {
            display: inline-block;
            margin: 5px 10px;
            list-style: none;
        }
</style>
</head>

<body>
    <div id='app'>
        <button @click="toggleButton">start</button>
        <ul>
            <li v-for="(item,index) in prints">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in prints1">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in prints2">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in prints3">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in prints4">{{item}}</li>
        </ul>
    </div>

    <table>
        <colgroup>
        <col class="first"></colgroup>
        <tbody>
            <tr>
                <th>hehe</th>
            </tr>
        </tbody>
    </colgroup>
    </table>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    prints: [],
                    prints1: [],
                    prints2: [],
                    prints3: [],
                    prints4: []
                }
            },
            methods: {
                init: function () {
                    ((prints) => {
                        var index;
                        for (index = 0; index < 5; index++) {
                            setTimeout(() => {
                                prints.push(index)
                            }, index * 1000);
                        }
                    })(this.prints);

                    ((prints) => {
                        var index;
                        for (index = 0; index < 5; index++) {
                            {
                                let i = index;
                                setTimeout(() => {
                                    prints.push(i)
                                }, i * 1000);
                            }
                        }
                    })(this.prints1);

                    ((prints) => {
                        for (let index = 0; index < 5; index++) {
                            setTimeout(() => {
                                prints.push(index)
                            }, index * 1000);
                        }
                    })(this.prints2);

                    ((prints) => {
                        let index;
                        for (index = 0; index < 5; index++) {
                            setTimeout(() => {
                                prints.push(index)
                            }, index * 1000);
                        }
                    })(this.prints3);

                    ((prints) => {
                        let index;
                        for (index = 0; index < 5; index++) {
                            (function (index) {
                                setTimeout(() => {
                                    prints.push(index)
                                }, index * 1000);
                            })(index)
                        }
                    })(this.prints4);

                },
                toggleButton() {
                    if (this.prints.length > 0) {
                        this.prints = [];
                        this.prints1 = [];
                        this.prints2 = [];
                        this.prints3 = [];
                    } else {
                        this.init();
                    }
                }
            }
        });
    </script>
</body>

</html>